<template>
  <div class="foods">
    <table>
      <tr is="Sale" v-for="(item,index) in goodsArr" :key="index" :obj="item" :index="index"></tr>
    </table>
    <p>All Number:{{total}}</p>
  </div>
</template>

<script>
import Sale from "./components/Sale.vue";
export default {
  components: {
    Sale,
  },
  data() {
    return {
      goodsArr: [
        {
          count: 0,
          goodsName: "Watermelon",
        },
        {
          count: 0,
          goodsName: "Banana",
        },
        {
          count: 0,
          goodsName: "Orange",
        },
        {
          count: 0,
          goodsName: "Pineapple",
        },
        {
          count: 0,
          goodsName: "Strawberry",
        },
      ],
    };
  },
  methods:{
    // quantity2(i,n){
      // this.goodsArr[i].count=n
      // this.$set
    // }
  },
  computed:{
    total(){
      return this.goodsArr.reduce((accu,obj)=>{
        return accu+=obj.count*1
      },0)
    }
  }
};
</script>

<style>
.foods {
  padding: 20px;
}
</style>